import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-tabs',
  standalone: true,
  imports: [RouterLink, RouterOutlet, RouterLinkActive],
  template: `
    <div class="mx-6 my-4 tabs">
      <a
        class="tab tab-bordered"
        [routerLink]="['a']"
        [routerLinkActive]="'tab-active'"
      >
        Tab A
      </a>
      <a
        class="tab tab-bordered"
        [routerLink]="['b']"
        [routerLinkActive]="'tab-active'"
      >
        Tab B
      </a>
      <a
        class="tab tab-bordered"
        [routerLink]="['c']"
        [routerLinkActive]="'tab-active'"
      >
        Tab C
      </a>
    </div>

    <section class="flex justify-around">
      <span> <router-outlet /> </span>
    </section>
  `,
  styles: [],
})
export class TabsComponent {}
